import { bind_patient_select, patient_guidance } from '@/services/guide';
import { get_platformuser_select } from '@/services/patient';
import { ActionType, ProForm, ProFormSelect, ProFormTextArea } from '@ant-design/pro-components';
import { DatePicker, Divider, Form, message, Modal } from 'antd';
import moment from 'moment';
import { useEffect, useState } from 'react';

interface Iprops {
  isShowModal: (show: boolean) => void;
  isModalOpen: boolean;
  actionRef: React.MutableRefObject<ActionType | undefined>;
}
const AddInhospital = (props: Iprops) => {
  const { isShowModal, isModalOpen, actionRef } = props;
  const [form] = Form.useForm();
  // 存储医生列表
  const [doctors, setDoctors] = useState([]);
  // 存储患者列表
  const [patientList, setPatientList] = useState([]);

  // 页面初始化
  useEffect(() => {
    // 获取指导医生列表
    get_doctor_select();
  }, []);

  // 获取指导医生列表
  const get_doctor_select = async () => {
    let res: any = await get_platformuser_select();
    console.log('医生列表', res);
    if (res.msg == 'ok') {
      let list: any = [];
      res.data.map((item: any) => {
        let lemp: any = {};
        lemp.value = item.id;
        lemp.label = item.username;
        list.push(lemp);
      });
      setDoctors(list);
    }
  };
  // 获取患者列表
  const get_patient_selevt = async (value: number) => {
    // 先清空患者列表
    form.setFieldsValue({ patient: null });
    console.log('医生id', value);
    let res: any = await bind_patient_select({ id: value });
    console.log('res', res.data);
    if (res.msg == 'ok') {
      let list: any = [];
      res.data.map((item: any) => {
        let lemp: any = {};
        lemp.value = item.id;
        lemp.label = item.username;
        list.push(lemp);
      });
      setPatientList(list);
    }
  };
  // 计划指导日期禁用 (只能选择当天或者当天之后的时间)
  const disabledDate = (current: any) => {
    return current && current < moment().subtract(1, 'day');
  };
  // 新增院内指导计划
  const add_patient_guidance = async (value: {
    platform_user_id: number;
    patient_id: number;
    plan_time: string;
    remark: string;
  }) => {
    let request_body = {
      ...value,
    };
    let res: any = await patient_guidance(request_body);
    console.log('新增院内指导', res);
    if (res.msg == 'ok') {
      actionRef.current?.reload();
      message.success('新增院内指导计划成功！');
      isShowModal(false);
    } else {
      message.error(res.msg);
    }
  };
  return (
    <Modal
      title="新增院内指导"
      centered
      open={isModalOpen}
      onCancel={() => isShowModal(false)}
      destroyOnClose={true}
      width={500}
      footer={null}
    >
      <Divider />
      <ProForm<{
        platform_user_id: number;
        patient_id: number;
        plan_time: string;
        remark: string;
      }>
        form={form}
        layout="horizontal"
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 15 }}
        onReset={() => isShowModal(false)}
        onFinish={(value) => add_patient_guidance(value)}
        submitter={{
          // 配置按钮文本
          searchConfig: {
            resetText: '取消',
            submitText: '确定',
          },
          resetButtonProps: {
            style: {
              display: 'block',
              position: 'absolute',
              left: 'calc(50% - 107px)',
            },
          },
          submitButtonProps: {
            style: {
              display: 'block',
              position: 'absolute',
              right: 'calc(50% - 107px)',
            },
          },
        }}
      >
        <ProFormSelect
          name="platform_user_id"
          label="指导医生"
          options={doctors}
          placeholder="请选择指导医生"
          rules={[{ required: true, message: '请选择指导医生' }]}
          onChange={(value: number) => get_patient_selevt(value)}
          fieldProps={{
            showSearch: true,
            filterOption: (input: any, option: any) =>
              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
          }}
        />
        <ProFormSelect
          name="patient_id"
          label="患者"
          options={patientList}
          placeholder="请选择患者"
          rules={[{ required: true, message: '请选择患者' }]}
          fieldProps={{
            showSearch: true,
            filterOption: (input: any, option: any) =>
              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
          }}
        />
        <Form.Item
          name="plan_time"
          label="指导时间"
          rules={[
            {
              required: true,
              message: '请选择指导时间',
            },
          ]}
        >
          <DatePicker disabledDate={disabledDate} style={{ width: '282px' }} />
        </Form.Item>
        <ProFormTextArea
          name="remark"
          label="备注"
          placeholder=""
          rules={[
            {
              max: 100,
              message: '允许输入字符最大数为100',
            },
          ]}
        />
        <br />
      </ProForm>
      <br />
    </Modal>
  );
};
export default AddInhospital;
